您正在浏览的是 Vue 2.x 的文档。Vue 3 的文档在这里。
渲染函数 & JSX 基础Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题：
Hello world!对于上面的 HTML，你决定这样定义组件接口：
Hello world!当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，你可能很快想到这样实现：
Vue.component('anchored-heading', { template: '#anchored-heading-template', props: {level: { type: Number, required: true} }})这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 ，在要插入锚点元素时还要再次重复。
虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子：
Vue.component('anchored-heading', { render: function (createElement) {return createElement( 'h' + this.level,// 标签名称 this.$slots.default // 子节点数组) }, props: {level: { type: Number, required: true} }})看起来简单多了！这样代码精简很多，但是需要非常熟悉 Vue 的实例 property。在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world!，这些子节点被存储在组件实例中的 $slots.default 中。如果你还不了解，在深入渲染函数之前